import { reactive } from 'vue'
import { Page, CustomEnum } from 'custom/index'
import { TableColumnOption } from 'custom/custom/TableColumn'

export default class ListPage extends Page {
  public static name: CustomEnum = 'ListPage';

  protected static props = {
    query: {
      type: Object,
      default: () => ({})
    },
    api: {
      type: Object,
      default: Promise.resolve({ page: 1, size: 10, total: 0, data: [] })
    }
  }

  protected static expose = ['getData', 'changePage']

  protected slots: { [key in CustomEnum]?: string }  = {
    PageSearch: 'search',
    PageTable: 'table',
    PagePagination: 'pagination',
    ListPageDrawer: 'drawer',
    ListPageTabs: 'tabs',
    ListPageAsyncTabs: 'tabs'
  }

  protected _api: (params?: any) => Promise<any> = () => Promise.resolve({ page: 1, size: 10, total: 100, data: [{}, {}] })
  public api(api: any) {
    this._api = api
    return this
  }

  protected _autoFetch: boolean = true
  public autoFetch(autoFetch = true) {
    this._autoFetch = autoFetch
    return this
  }

  // 添加search
  useSearch() {
    return this.add('PageSearch')
  }
  addSearch() {
    this.useSearch()
    return this
  }
  // 添加table
  useTable() {
    return this.add('PageTable')
  }
  addTable() {
    this.useTable()
    return this
  }
  // 添加分页器
  usePagination() {
    return this.add('PagePagination')
  }
  addPagination() {
    this.usePagination()
    return this
  }
  // 抽屉
  useDrawer() {
    return this.add('ListPageDrawer')
  }
  addDrawer() {
    this.useDrawer()
    return this
  }
  // tabs
  useTabs() {
    return this.add('ListPageTabs')
  }
  addTabs() {
    this.add('ListPageTabs')
    return this
  }
  // 异步tabs
  useAsyncTabs() {
    this.autoFetch(false)
    return this.add('ListPageAsyncTabs')
  }
  addAsyncTabs() {
    this.useAsyncTabs()
    return this
  }

  // 添加按钮权限
  useAuthButton() {
    const search = this.get('PageSearch')
    if (!search) {
      throw new Error('先添加 PageSearch 组件')
    }
    return search.useAuthButton()
  }
  addAuthButton() {
    this.useAuthButton()
    return this
  }

  useAuthColumn(option: TableColumnOption = {}) {
    const table = this.get('PageTable')
    if (!table) {
      throw new Error('先添加 PageTable 组件')
    }
    return table.useAuthColumn(option)
  }
  addAuthColumn(option: TableColumnOption = {}) {
    this.useAuthColumn(option)
    return this
  }

  protected get props(): any {
    const query = {}
    const search = this.get('PageSearch')
    const input = search.get('SearchInput')
    const formItems = search.getAll('FormItem')
    if (input) {
      Object.assign(query, input.propsValue)
    }
    formItems.forEach(item => {
      Object.assign(query, item.propsValue)
    })

    const tabs = this.get('ListPageTabs')
    if (tabs && tabs.getProp()) {
      query[tabs.getProp()] = tabs.getDefault()
    }
    const data = reactive<any>(query)

    const table = this.get('PageTable') as any
    const columnsMap = table.children.get('default') || new Map()
    const columns = []
    for (const item of columnsMap.entries()) {
      const key = item[0] || ''
      const d = item[1] || {}
      if (key && !key.startsWith('_')) {
        columns.push({ label: d._props.label, prop: d._props.prop })
      }
    }
    return {
      query: data,
      api: this._api,
      columns,
      autoFetch: this._autoFetch
    }
  }
}
